<template>
  <div class="myPage">
    <common-header title="个人中心"></common-header>
    <div class="headerWrap">
      <!-- 用户信息 -->
      <div class="ownInfo">
        <div class="person">
          <p></p>
          <span>{{contact[0].name}}</span>
        </div>
        <div class="actImg">
          <img src="../../assets/img/mya.gif" alt="">
        </div>
      </div>
      <!-- 其他信息栏 -->
      <div class="otherInfo">
        <div class="order" @click="$router.push('/contactList')">
          <p>收货地址管理</p>
        </div>
        <div class="divideBg"></div>
        <div class="order" @click="$router.push('/cart')">
          <p>我的订单</p>
        </div>
        <div class="divideBg"></div>
        <div class="order">
          <p>优惠券</p>
        </div>
        <div class="divideBg"></div>
        <div class="order">
          <p>有货币</p>
        </div>
        <div class="divideBg"></div>
        <div class="order">
          <p>消息</p>
        </div>
        <div class="divideBg"></div>
        <div class="order">
          <p>服务与反馈</p>
        </div>
        <div class="divideBg"></div>
      </div>
      <guess-like :likes="likes"></guess-like>
    </div>
    <common-tabbar></common-tabbar>
  </div>
</template>

<script>
import CommonTabbar from '@components/CommonTabbar'
import CommonHeader from '@components/CommonHeader'
import GuessLike from './components/GuessLike'
import { getLike } from '@api'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      likes: []
    }
  },
  components: {
    CommonTabbar,
    CommonHeader,
    GuessLike
  },
  created () {
    this.fetchCartLike()
  },
  methods: {
    fetchCartLike () {
      getLike({
        categoryId: 173941
      }).then(res => {
        this.likes = res.data.data
      })
    }
  },
  computed: {
    ...mapState({
      contact: state => state.contact.contacts
    })
  }
}
</script>

<style lang="scss" scoped>
.myPage {
  display: flex;
  flex-direction: column;
  .headerWrap {
    flex: 1;
    .ownInfo {
      display: flex;
      position: relative;
      height: 100px;
      background-image: url('../../assets/img/my.jpg');
      background-size: cover;
      .person {
        align-items: center;
        margin-left: 30px;
        flex: 5;
        display: flex;
        p {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          background-image: url('../../assets/img/per.png');
          background-size: cover;
        }
        span {
          font-size: 20px;
          margin-left: 20px;
          color: #fff;
        }
      }
      .actImg {
        flex: 1;
        img {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 80px;
          height: 80px;
        }
      }
    }
    .otherInfo {
      .order {
        height: 40px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        p {
          font-size: 14PX;
          color: #444;
        }
      }
    }
  }
}

</style>
